<template>
  <div class="cart-total">
    <van-actionsheet v-model="show" title="请选择付款方式">
      <h3 v-if="toPayOrder" style="text-align: center">实付金额{{toPayOrder.total_price | yuan}}</h3>
      <van-radio-group v-model="radio">
        <van-cell-group>
          <van-cell title="微信" clickable @click="radio = '1'">
            <van-radio name="1" />
          </van-cell>
          <van-cell title="支付宝" clickable @click="radio = '2'">
            <van-radio name="2" />
          </van-cell>
          <van-button type="primary" size="large" v-on:click="submit">去支付</van-button>
        </van-cell-group>
      </van-radio-group>
    </van-actionsheet>
    <!--要有订单才会显示这一栏-->
    <div v-if="orders">
    <!--显示订单时间 van-panel大标签 都写在这里面-->
    <!--v-for遍历商品-->
      <!--获取当前订单生成的时间-->
      <van-panel :title="order.created | date('%F %T')" v-for="order in orders" :key="order.id">

      <!--包含整个购物车的div，定义一个外框 给外面留一点空白！定义一下字体-->
      <div class="cart-all-unpay">
      <!--二级div 包括1.显示商品内容和2.底部的按钮-->
        <!--1.显示商品缩略图和价钱数量的div-->
        <div class="cart-header">
        <!-- 1-1商品名图片-->
<!--          <div> 这个不能加上-->
            <a class="cart-thumb">
              <img v-lazy="order.order_details[0].product.thumb" class="cart-image">
            </a>
              <!--            <lazy-component :name="order.id">-->
<!--              <img width="100px" height="50px" v-lazy="order.order_details[0].product.thumb" class="cart-image">-->
<!--            </lazy-component>-->
<!--          </div>-->
          <!-- 1-2商品名和商品价格-->
          <div class="cart-content">
                <!-- 1-2-1商品名-->
                <div class="cart-title">
                  {{order.order_details[0].product.title}}
                  <span class="cart-price">{{order.total_price}}</span>
                </div>
                <!-- 1-2-2价钱数量-->
                <div class="cart-bottom">
                  <!-- 1-2-2-1价钱-->
                  <div class="cart-describe">
                    <span>这是一个神奇的小体验</span>
                  </div>
                  <!-- 1-2-2-2数量-->
                  <div class="cart-num">
                    <span>×{{order.order_details | map(detail => detail.quantity) | sum }}</span>
                  </div>
                </div>
          </div>
        </div>
<!--          <span>{{order.order_details[0].product.title}}</span>-->
<!--          <span>{{order.total_price}}</span>-->
<!--        </div>-->
        <!--2.显示实付金额和按钮的div-->
        <div slot="footer" class="cart-footer">
<!--          <span>实付金额：{{ order.total_price | yuan }} 数量：{{order.order_details | map(detail => detail.quantity) | sum }}</span>-->
          实付金额<span class="actualpay">：{{ order.total_price | yuan }} </span>
          <van-button round class="cart-button" size="mini" v-on:click="payment(order)">付款</van-button>

        </div>
      </div>
      </van-panel>
    </div>
<!--    <div v-else class="no-order" >-->
<!--      <span>您还没有相关订单</span>-->
<!--    </div>-->
    <div v-if="orders.length === 0 " class="no-order" v-cloak>
      <span v-cloak> {{message}}</span>
    </div>
    <div>
    </div>
  </div>
</template>

<script>
import { Card, Panel, Toast, Button, Actionsheet, RadioGroup, Radio, CellGroup, Cell } from 'vant'
export default {
  name: 'orders-unpay',
  components: {
    [Panel.name]: Panel,
    [Button.name]: Button,
    [Actionsheet.name]: Actionsheet,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
    [Card.name]: Card
  },
  data () {
    return {
      message: '没有相关订单哦',
      show: false,
      radio: '1',
      orders: [],
      toPayOrder: null
    }
  },
  // 生命周期函数
  async created () {
    await this.getOrders()

  },
  methods: {
    async getOrders (type) {
      const { data } = await this.$api.order.orderList({ type: 0 })
      console.log(data)
      if (data.code !== 200) {
        Toast(data.desc)
      } else {
        // this.orders = data.data
        this.orders = data.data.filter(item => [0].includes(item.state))
      }
      console.log('orders:' + this.orders)
      console.log('orders:' + this.orders.length)
    },
    payment (order) {
      this.show = true
      this.toPayOrder = order
    },
    submit () {
      this.$router.push({ name: 'payment-confirm', params: { id: this.toPayOrder.id } })
    }
  }
}
</script>

<style lang="less">
  [v-cloak] {display: none!important;}
  .van-cell{
    font-size: 0.75rem;
  }
  .cart-total{
    /*margin-top: 20px;*/
    background-color: #fafafa;
  }
  .van-panel__content {
    /*padding-left: 20px;*/
    padding: 0 10px 10px 10px;
  }
  .van-panel__footer {
    text-align: right;
    .van-button {
      margin-left: 5px;
    }
  }
  .no-order {
    background-color: white;
    text-align: center;
    margin-top: 50px;
  }
  /*定义整个购物车 通过padding使整体外面有一个边框，字体大小进行调整*/
  .cart-all-unpay{
    width: auto;
    height: 110px;
    position: relative;
    color: #323233;
    font-size: 0.75rem;
    padding: 0.3125rem 0.9375rem;
    /*box-sizing: border-box;*/
    background-color: #fafafa;
  }
  /*定义除了按钮的整个上半部分 没有这个的话图片和字体不会在同一行！！！！！*/
  .cart-header{
    /*display: -webkit-box;*/
    /*display: -webkit-flex;*/
    height: 80px;
    display: flex;
    border-bottom:0.05rem solid #f2f3f5;//画一条分界线
  }
  /*图片布局*/
  .cart-thumb{
    position: relative;
    width: 5.625rem;
    height: 5.625rem;
    margin-right: 0.625rem;
    -webkit-box-flex: 0;
    /*-webkit-flex: none;*/
    flex: none;
    -webkit-box-align: center;
    /*-webkit-align-items: center;*/
    align-items: center;
    -webkit-box-pack: center;
    /*-webkit-justify-content: center;*/
    justify-content: center;
  }
  /*图片样式*/
  .cart-image{
    border: 0;
    max-width: 100%;
    height: 70px;
  }
  /*购物内容描述的样式*/
  .cart-content{
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    height: 5.625rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    min-width: 0;
  }
  /*商品名的div*/
  .cart-title{
    margin-top: 5px;
    line-height: 1rem;
    max-height: 2rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  /*商品价格和数量显示的div*/
  .cart-bottom{
    line-height: 1.25rem;
  }
  /*价格*/
  .cart-price{
    display: inline-block;
    color: #f44;
    font-weight: 700;
    float: right;
  }
  .cart-describe{
    display: inline-block;
    color: rgb(139, 139, 139);
  }
  /*数量*/
  .cart-num{
    float: right;
  }

  .cart-footer{
    /*text-align: right;*/
    height: 30px;
    padding-top: 5px;
  }
  /*实付金额*/
  .actualpay{
    color: red;
  }
  /*按钮*/
  .cart-button{
    float: right;
  }
</style>
